<script setup>
import { ref } from 'vue'
import SiderMenu from '@/components/common/SiderMenu.vue'
import NavMenu from '@/components/common/NavMenu.vue';
import { RouterView } from 'vue-router';

// 导航菜单
const navMenus = {
  logo: {
    width: '40px',
    alt: 'logo'
  },
  title: 'Demo',
  list: [
    {
      name: '入口',
      icon: 'ios-undo-outline',
      to: '/'
    }
  ]
}
// 侧边菜单
const menus = [
  {
    name: '首页',
    icon: 'md-home',
    to: {
      name: 'home'
    }
  },
  {
    name: '组件',
    icon: 'ios-cube',
    children: [
      {
        name: '基础组件',
        icon: 'ios-cube-outline',
        to: {
          name: 'home-basecomponent'
        }
      }
    ]
  }
]
// 侧边菜单是否折叠 默认不折叠
const collapsed = ref(false)
const siderMenuWidth = ref(200)
// 切换折叠方法
const onCollapsed = (value) => {
  collapsed.value = !value
  siderMenuWidth.value = collapsed.value ? 60 : 200
}
</script>

<template>
  <div class="layout w-100 h-100">
    <Layout>
      <Header>
        <NavMenu :menus="navMenus" :collapsed="collapsed" :width="siderMenuWidth + 'px'" @onCollapsed="onCollapsed">
        </NavMenu>
      </Header>
      <Layout>
        <Sider hide-trigger :model-value="collapsed" :width="siderMenuWidth" style="transition: all 0.6s linear;background: '#fff'">
          <SiderMenu :menus="menus" :collapsed="collapsed" :width="siderMenuWidth" :accordion="true"></SiderMenu>
        </Sider>
        <Content :style="{ padding: '2px', minHeight: '280px', background: '#fff' }">
          <RouterView v-slot="{ Component }">
            <Transition name="slide-fade" mode="out-in">
              <component :is="Component" />
            </Transition>
          </RouterView>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<style scoped lang="less">
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;

  .ivu-layout {
    height: 100%;

    .ivu-layout-header {
      margin: 0px;
      padding: 0px;
      height: 45px;
      // 将头部区域标记为 可拖拽
      -webkit-app-region: drag;
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
